<template>
  <div class="newHome-box">
    <div class="user-info">
      <van-nav-bar title="可用额度" left-arrow @click-left="$router.back()"/>
      <div class="user-info-num">
        <div class="credit-box">
          <p class="user-info-title">可用额度总额（元）</p>
          <div class="user-info-price">{{ abTools.comdify((quota.totalAmt - quota.usageAmt).toFixed(2)) }}</div>
          <p class="credit-title">授信总金额（元）</p>
          <div class="credit-price">{{ abTools.comdify(quota.totalAmt.toFixed(2)) }}</div>
        </div>
        <img :src="require(`@/assets/`+systemColor+`/allocate-sign.png`)" alt=""/>
      </div>
    </div>
    <div class="home-list-box">
      <div class="product_main">
        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> -->
        <div class="product_bg">
          <gz-default-page v-if="!dataList || dataList.length <= 0" :imageSize="'14.8rem'" :textSize="'1.4rem'" :text="'暂无记录'"></gz-default-page>
          <div v-for="item,index in dataList" :key="index" class="product_item" style="justify-content: space-between;" @click="toDetail(item)">
            <div class="title-box">
              <div class="title-left" style="flex: 1;">
                <div class="loan-title">{{ item.prodNam }}</div>
                <div class="loan-code">合同编码 {{ item.contractId }}</div>
              </div>
              <div class="btn-group" v-if="!item.freeze && !item.first">
                <div class="btn" @click="drawMoney(item)">提款</div>
              </div>
              <div class="pro-freeze" v-if="item.freeze">
                <img :src="require(`@/assets/public/allocate-freeze.png`)" alt=""/>
              </div>
            </div>
            <div class="product_item_left">
              <div class="product_price">
                <div class="pro-price">{{ abTools.comdify((Number(item.contractAmt) - Number(item.usageAmt)).toFixed(2)) }}<!-- <span> 万</span> --></div>
                <p class="pro-title">可用额度（元）</p>
                <div class="border-right"></div>
              </div>
              <div class="product_item_item">
                <div class="pro-price">{{ abTools.comdify(Number(item.contractAmt).toFixed(2)) }}<!-- <span> 万</span> --></div>
                <p class="pro-title">授信金额（元）</p>
              </div>
            </div>
            <div class="pro-freeze-first" v-if="item.freeze || item.first">
              <div v-if="item.freeze"><p>状态异常，请与我行客户经理联系或拨打我行客服热线。</p>
                <p>0000-00000000 咨询。</p></div>
              <div class="sign" v-if="item.first"><p>请在2023-12-31日前完成首次借款，激活额度</p></div>
            </div>
          </div>
        </div>
        <!-- </van-list>
      </van-pull-refresh>     -->
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import setting from "@/setting";
import {gzDefaultPage} from '@/components/customize'

export default {
  components: { gzDefaultPage },
  name: "allocateList",
  data() {
    return {
      systemColor: '',
      active: '',
      dataList: [
        // {quota: '8000',prodName:'华夏财富宝',displaySlogn:'流程便捷、安全合规',ratio:'0.34%',displayOverall:'小微企业主、个体工商户、农户',freeze: true,first: false},
        // {quota: '8000',prodName:'华夏财富宝',displaySlogn:'流程便捷、安全合规',ratio:'0.34%',displayOverall:'小微企业主、个体工商户、农户',freeze: false,first: true},
        // {quota: '8000',prodName:'华夏财富宝',displaySlogn:'流程便捷、安全合规',ratio:'0.34%',displayOverall:'小微企业主、个体工商户、农户',freeze: false,first: false},
      ],
      quota: {
        totalAmt: 0,
        usageAmt: 0,
      },
      searchParam: {
        contractStatus: '01',
        signStatus: '01',
      }
      // loading: false,
      // finished: false,
      // refreshing: false,
      // page:0,
      // pageSize:10,
      // pageData:{
      //     total:0
      // }
    };
  },
  created: function () {
    this.systemColor = localStorage.getItem("systemColor");
    //将权限放到缓存中，提前拿出来。防止获取当前用户信息等待时间太长。每次进首页再更新下
    if (window.localStorage) {
      var userMsgJson = localStorage.getItem("userMsg");
      if (userMsgJson) {
        try {
          this.userMsg = JSON.parse(userMsgJson);
        } catch (error) {
        }
      }
    }
    this.getContractList();
    this.getCustQuota();
  },
  methods: {
    toDetail(item) {
    },
    getContractList() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      });
      this.baseService.postForm(this.__ctx + '/plugin/mobileBusiCenter/contractList', this.searchParam).then(res => {
        this.$toast.clear();
        if (res.isOk) {
          this.dataList = res.data;
        } else {
          this.$toast({
            icon: 'warning',
            message: res.msg
          });
        }
      }, function (status) {
        this.$toast.clear();
        if (status == !0) {
          this.$toast({
            icon: 'warning',
            message: '加载失败！' + status
          });
        }
      });
    },
    getCustQuota() {
      let defer = this.baseService.postForm(this.__ctx+"/plugin/mobileBusiCenter/custQuotaInfo");
      defer.then(res => {
        if (res.isOk) {
            this.quota = res.data
        }
      });
    },
    drawMoney(item) {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      });
      var userMsgJson = localStorage.getItem("userMsg");
      var userMsgJson1 = JSON.parse(userMsgJson);
      this.baseService.postForm(this.__ctx + '/plugin/mobileBusiCenter/checkCustBankCard', {clientId: userMsgJson1.user.account}).then(res => {
        this.$toast.clear();
        if (res.isOk) {
          if (!res.data) {
            this.$dialog.confirm({
              title: '温馨提示',
              message: '请添加一张银行卡即可使用该服务，您可添加本行银行卡或其他银行的银行卡。',
              confirmButtonText: '立即添加',
              cancelButtonText: '以后再说',
              confirmButtonColor: this.systemColor == 'blueSeries' ? 'rgb(43, 131, 255)' : 'rgb(255, 74, 50)'
            }).then(() => {
              // on confirm
              this.$router.push({path: '/loanPage/addBankCard'});
            }).catch(() => {
              // on cancel
            });
          } else {
            //测试跳转 去提款
            this.totk(item)
          }
        } else {
          this.$toast({
            icon: 'warning',
            message: res.msg
          });
        }
      }, function (status) {
        this.$toast.clear();
        if (status == !0) {
          this.$toast({
            icon: 'warning',
            message: '加载失败！' + status
          });
        }
      });
    },
    /**
     * 去提款
     * @param item
     */
    totk(item) {
      console.log("去提款------")
      //  获取流程id
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      });
      let param = {
        order: 'asc',
        offset: 0,
        limit: 10,
        'name_^VLK': "",
        'key_^VLK': 'yxfk',
      }
      this.baseService.postForm(this.__ctx + '/bpm/definition/listJson', param).then(res => {
        this.$toast.clear();
        if (res.isOk) {
          res.rows.forEach(i => {
            if (i.key === param["key_^VLK"]) {
              //  启动流程
              this.startDef(i.mainDefId || i.id,item)
            }
          })
        } else {
          this.$toast({
            icon: 'warning',
            message: res.msg
          });
        }
      }, function (status) {
        this.$toast.clear();
        if (status == !0) {
          this.$toast({
            icon: 'warning',
            message: '加载失败！' + status
          });
        }
      });
    },
    /**
     * 启动流程 进入启动页面
     * @param defId
     */
    startDef(defId,item) {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      });
      let param = {
        defId: defId,
        instanceId: '',
        formType: 'mobile'
      }
      this.baseService.postForm(this.__ctx + '/bpm/instance/getInstanceData', param).then(res => {
        this.$toast.clear();
        if (res.isOk) {
          //如果又返回taskid
          this.$router.replace({
            path: '/bpm/start',
            query: {
              defId: res.data.defId,
              contractId: item.contractId
            }
          })
        } else {
          this.$toast({
            icon: 'warning',
            message: res.msg
          });
        }
      }, function (status) {
        this.$toast.clear();
        if (status == !0) {
          this.$toast({
            icon: 'warning',
            message: '加载失败！' + status
          });
        }
      });
    },
    // getNewsList(){
    //   let param = {
    //       "offset":(this.page-1)*this.pageSize,
    //       "limit":this.pageSize,
    //   };
    //   // if (this.refreshing) {
    //   //     this.dataList = [];
    //   //     this.refreshing = false;
    //   // }
    //   this.baseService.postForm(this.__ctx + "/oa/oANotify/queryCustomerNotify",param).then(result => {
    //       this.dataList = this.dataList.concat(result.rows);
    //       this.pageData.total=result.total;
    //       this.loading = false;
    //       if (result.rows.length == 0) {
    //           this.finished = true;
    //       }else{
    //           this.finished = false;
    //       }
    //   }, function (status) {
    //       this.loading = false;
    //       this.finished = true;
    //       if (status == !0) {
    //           this.$toast({
    //   icon: 'warning',
    //   message: '加载失败！' + status
    // });
    //       }
    //   });
    // },
    // onRefresh() {
    //     // 清空列表数据
    //     this.finished = false;

    //     // 重新加载数据
    //     // 将 loading 设置为 true，表示处于加载状态
    //     this.loading = true;
    //     this.getNewsList();
    // },
    // onLoad() {
    //     if(this.refreshing){
    //         this.dataList = [];
    //         this.page = 1;
    //         this.refreshing = false;
    //     }else{
    //         this.page = this.page + 1;
    //     }
    //     this.getNewsList();
    // },
  },
};
</script>

<style scoped lang="less">
/deep/ .van-nav-bar {
  background-color: transparent;

  .van-nav-bar__content {
    height: 4.4rem;
    line-height: 2rem;

    .van-icon {
      color: rgb(255, 255, 255);
      font-size: 2rem;
    }

    .van-nav-bar__title {
      font-size: 1.8rem;
      color: rgb(255, 255, 255);
    }
  }
}

[class*=van-hairline]::after {
  border: 0;
}

.newHome-box {
  .user-info {
    position: relative;
    background-image: url("../../assets/blueSeries/home-bg.png");
    background-size: 100%;
    background-position: bottom;
    width: 100%;
    height: 21.4rem;
    margin-bottom: 1.2rem;

    .user-info-num {
      font-size: 1.4rem;
      display: flex;
      justify-content: space-between;
      color: #ffffff;
      padding: 0 2.4rem;

      .user-info-title {
        font-weight: 500;
        margin-top: 2.6rem;
        line-height: 1.6rem;
      }

      .user-info-price {
        font-weight: 700;
        font-size: 2.8rem;
        line-height: 3.3rem;
        margin-top: 0.4rem;
      }

      .credit-title {
        font-weight: 500;
        font-size: 1.2rem;
        margin-top: 2.6rem;
        line-height: 1.4rem;
      }

      .credit-price {
        font-weight: 600;
        font-size: 1.8rem;
        line-height: 2.1rem;
        margin-top: 0.4rem;
      }

      img {
        width: 8.4rem;
        max-width: 8.4rem;
        height: 10.2rem;
        margin-top: 2.4rem;
      }
    }
  }

  .product_main {
    .product_bg {

      .product_item {
        margin: 1.2rem;
        background: rgb(255, 255, 255);
        color: rgb(134, 144, 156);
        font-size: 1.3rem;
        border-radius: 1rem;
        padding: 1.2rem;

        .title-box {
          padding-bottom: 0.8rem;
          border-bottom: 0.6px solid #f2f2f2;
          position: relative;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .pro-freeze {
            width: 6.3rem;
            height: 5.1rem;
            position: absolute;
            top: -1.2rem;
            right: -1.2rem;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .loan-code {
          font-size: 1.2rem;
          line-height: 1.4rem;
          color: rgba(29, 33, 41, 0.54);
          margin-top: 0.8rem;
        }

        .loan-title {
          font-size: 1.6rem;
          line-height: 1.9rem;
          color: rgb(29, 33, 41);
          font-weight: 700;
        }

        .btn-group {
          display: flex;
          flex-direction: row-reverse;

          .btn {
            padding: 0.6rem 1.8rem;
            font-size: 1.4rem;
            color: rgb(255, 255, 255);
            font-weight: 500;
            text-align: center;
            background: linear-gradient(90.00deg, var(--gradient2-color), var(--primary-color));
            border-radius: 4rem;
            line-height: 1.4rem;
            // margin-top: 1rem;
          }
        }

        .product_item_left {
          display: flex;
          align-items: center;
          width: 100%;
          padding: 1.6rem 0 0.8rem;

          .product_price {
            min-width: 50%;
            text-align: center;
            position: relative;

            .pro-price {
              font-size: 2rem;
              color: var(--primary-color);

              span {
                font-size: 1.4rem;
              }
            }

            .pro-title {
              color: rgb(134, 144, 156);
            }

            .border-right {
              width: 0.6px;
              height: 3.7rem;
              margin: 0;
              background: #f2f2f2;
              position: absolute;
              right: 0;
              top: 50%;
              margin-top: -1.9rem;
            }
          }

          .product_item_item {
            min-width: 50%;
            text-align: center;
            position: relative;

            div {
              margin-top: 0.8rem;
            }

            .pro-price {
              font-size: 2rem;
              color: rgb(29, 33, 41);

              span {
                font-size: 1.4rem;
              }
            }

            .pro-title {
              color: rgb(134, 144, 156);
            }
          }
        }

        .pro-freeze-first {
          font-size: 1.2rem;
          text-align: center;
          background: rgba(242, 242, 246, 0.6);
          padding: 0.2rem 0.6rem;
          border-radius: 0.4rem;

          .sign {
            color: rgb(245, 63, 63);
          }
        }
      }
    }

    .arrow-more {
      font-size: 1.2rem;
      line-height: 2rem;
      color: rgb(29, 33, 41);
      text-align: center;
      height: 4rem;
    }
  }
}

// 橙色系
.orangeSeries .user-info {
  background-image: url('../../assets/orangeSeries/allocate-bg.png');
}

// 蓝色系
.blueSeries .user-info {
  background-image: url('../../assets/blueSeries/allocate-bg.png');
}
</style>
